<!DOCTYPE html>
<html>
<head>
    <title>资讯列表展示</title>
    <style>
        #resultList{
            width:60%;
            height:auto;
            display: flex;
            flex-direction:column;
            padding:10px;
            background-color:rgba(180, 180, 180, 0.1);
            margin-top:20px;
        }
        .weibo-item{
            padding-left:100px;
            display: flex;
            flex-direction: column;
            position:relative;
            margin-top:10px;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            border-radius: 10px;
            background-color: #fff;
            height:120px;
            justify-content: center;
        }

        .weibo-item .cover-image{
            width:100px;
            height:120px;
            position:absolute;
            top:0;
            left:0;
            border-radius: 10px 0 0 10px;
        }

        .weibo-item .weibo-title{
            font-weight:600;
            font-size:110%;
            margin-left:15px;
            margin-bottom:10px;
        }

        .weibo-item .weibo-text{
            font-size:100%;
            margin-left:15px;
            margin-bottom:10px;
        }
        .weibo-item .weibo-time{
            font-size:100%;
            margin-left:15px;
            margin-bottom:10px;
            color:rgba(80,80,80,0.6);
        }

        .weibo-item .praised{
            position:absolute;
            right:10px;
            top:10px;
            padding:5px 10px;
            background-color:rgb(255,108,55);
            color:#fff;
            text-align: center;
            border-radius: 5px;
        }

        .weibo-item .clear{
            clear:both;
        }
    </style>
</head>
<body>

</body>
<script>
    var host="localhost";



    //【界面渲染】定义界面渲染操作，根据请求到的数据绘制列表
    //dataList:影片资讯列表数据
    function renderingWeiboDataList(dataList){
        //获取渲染的div
        var dataBox=document.getElementById("resultList");
        //循环遍历列表数据
        for(var i=0;i<dataList.length;i++){
            var weiboItem=renderingWeiboItem(dataList[i]);
            dataBox.appendChild(weiboItem);
        }
    }
    //【界面渲染】定义单个元素的界面渲染操作，根据单个资讯信息，返回动态创建的dom
    //dataItem:单个影片资讯数据
    function renderingWeiboItem(dataItem){
        //创建容器节点
        var weiboItemBox=document.createElement("div");
        weiboItemBox.setAttribute("class","weibo-item");
        weiboItemBox.setAttribute("id",dataItem.uuid);
        //创建资讯海报
        var imgBox=document.createElement("img");
        imgBox.setAttribute("class","cover-image");
        imgBox.setAttribute("src",dataItem.movieInfo.coverImage);

        //创建标题
        var itemTitle=document.createElement("div");
        itemTitle.setAttribute("class","weibo-title");
        itemTitle.innerText=dataItem.itemTitle;

        //创建文字内容
        var itemText=document.createElement("div");
        itemText.setAttribute("class","weibo-text");
        itemText.innerText=dataItem.itemText+"：#"+dataItem.movieInfo.movieName+"#";

        //创建时间的显示
        var itemTime=document.createElement("div");
        itemTime.setAttribute("id","time-"+dataItem.uuid);
        itemTime.setAttribute("class","weibo-time");
        var timeString=dataItem.publishTime.replace('T',' ');
        itemTime.innerText=moment(timeString).fromNow();

        //创建清除浮动的div
        var clearDiv=document.createElement("div");
        clearDiv.setAttribute("class","clear");

        //将子元素依序加入到容器中
        weiboItemBox.appendChild(imgBox)
        weiboItemBox.appendChild(itemTitle)
        weiboItemBox.appendChild(itemText)
        weiboItemBox.appendChild(itemTime);
        weiboItemBox.appendChild(clearDiv);

        //监听时间更新事件，主动更新发布时间
        timeUpdateEvent.subscribe(()=>{
            console.log("监听到时间更新事件，主动更新发布时间显示",dataItem)
            var timeString=dataItem.publishTime.replace('T',' ');
            var timeDiv=document.getElementById("time-"+dataItem.uuid)
            timeDiv.innerHTML=moment(timeString).fromNow();
        })

        //返回组装好的dom
        return weiboItemBox;
    }

    //【界面渲染】定义单个元素已点赞标记的渲染操作。
    //dataItem:单个已点赞数据
    function renderingWeiboPraised(dataItem){
        //根据资讯的uuid获取到div
        var praisedItem=document.getElementById(dataItem.uuid);
        //向div中添加 已点赞标记。
        var praisedDiv=document.createElement("div");
        praisedDiv.setAttribute("class","praised");
        praisedDiv.setAttribute("id","praised"+dataItem.uuid);
        praisedDiv.innerText="已点赞";

        //将已点赞的div添加到对应的资讯容器中
        praisedItem.appendChild(praisedDiv);
    }


</script>
</html>
